<template>
  <q-page class="my-page">
    <div class="row items-center justify-between">
      <div class="my-page-header">
        <q-breadcrumbs align="left">
          <q-breadcrumbs-el
            label="首页"
            to="/"
          />
          <q-breadcrumbs-el
            label="系统权限"
            to="/system"
          />
          <q-breadcrumbs-el label="角色管理" />
        </q-breadcrumbs>
      </div>
    </div>
    <div class="my-page-body">
      <div class="my-tabs">
        <q-tabs
          narrow-indicator
          align="left"
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
        >
          <q-route-tab to="/system/roles">角色列表</q-route-tab>
          <q-route-tab :to="`/system/roles/form${form.id!=null?'/'+form.id:''}`">{{form.id!=null?'编辑':'新增'}}角色</q-route-tab>
        </q-tabs>
      </div>
      <q-card
        flat
        class="fit "
      >
        <div class="container">
          <q-form
            class="my-form gutter"
            @submit="onSubmit"
          >
            <q-card-section class="q-pa-xl">
              <div class="row q-col-gutter-md">
                <div class="col-12 col-md-4 col-lg-4">
                  <label for="roleName"> 角色</label>
                  <q-input
                    outlined
                    dense
                    no-error-icon
                    v-model.trim="form.roleName"
                    placeholder="请输入角色"
                    :rules="[ val => val && val.length > 0 || '请设置角色']"
                    class="q-mt-sm"
                  >
                  </q-input>
                </div>
                <div class="col-12">
                  <label for="roleNameCn"> 角色名称 </label>
                  <q-input
                    outlined
                    dense
                    no-error-icon
                    v-model.trim="form.roleNameCn"
                    placeholder="请输入角色名称"
                    class="q-mt-sm"
                  >
                  </q-input>
                </div>
                <div class="col-12">
                  <label for="roleType"> 角色类型 </label>
                  <div class="q-gutter-sm q-mt-xs">
                    <q-radio
                      v-model="form.roleType"
                      val="1"
                      label="员工角色"
                      dense
                    />
                  </div>
                </div>
                <div class="col-12">
                  <label for=""> 权限分配 </label>
                  <div
                    class="q-mt-sm"
                    style="max-width:300px"
                  >
                    <q-tree
                      :nodes="treeData"
                      node-key="id"
                      label-key="name"
                      :tick-strategy="'strict'"
                      :ticked.sync="ticked"
                      :expanded.sync="expanded"
                      default-expand-all
                    />
                  </div>
                </div>
                <div class="col-12">
                  <label for="remark"> 备注 </label>
                  <div class="q-mt-sm">
                    <q-input
                      dense
                      outlined
                      no-error-icon
                      v-model="form.remark"
                      autogrow
                      :input-style="{ minHeight: '60px' }"
                    />
                  </div>
                </div>
              </div>
            </q-card-section>
            <q-separator />
            <q-card-actions class="q-pa-xl">
              <q-btn
                color="primary"
                class="wd-80"
                type="submit"
              >保存</q-btn>
              <q-btn
                class="wd-80"
                type="reset"
              >重置</q-btn>
              <q-space />
              <q-btn
                color="negative"
                class="wd-80"
                v-if="form.id"
                v-del:goback="{id:form.id, url:'/admin/role-delete'}"
              >删除</q-btn>
            </q-card-actions>
          </q-form>
        </div>
        <q-inner-loading :showing="loading">
          <q-spinner-hourglass
            size="sm"
            color="primary"
          />
        </q-inner-loading>
      </q-card>
    </div>
  </q-page>
</template>

<script>
import axios from 'axios'
export default {
  name: 'RoleForm',
  data () {
    return {
      loading: false,
      treeData: [],
      ticked: [],
      expanded: ['1'],
      form: {
        id: this.$route.params.id,
        roleType: '1'
      },
      oldRoleName: null
    }
  },
  mounted () {
    if (this.form.id) {
      this.onMenuTree()
      this.onRequest()
    } else {
      this.onMenuTree()
    }
  },
  methods: {
    async onRequest () {
      this.loading = true
      const data = {
        "role": {
          "id": "1",
          "created": "2020-06-05T11:28:00.000+0800",
          "roleName": "ROLE_ADMIN",
          "roleNameCn": "系统管理员",
          "roleType": "1",
          "remark": "客户方使用的系统管理员，用于一些常用的基础数据配置。",
          "status": "0"
        },
        "menuIds": ["44", "21", "29", "28", "9", "8", "10", "22", "23", "14", "24", "25", "26", "27", "2", "20", "30", "31", "19", "11", "12", "38", "36", "34", "35", "33", "39", "37", "32", "43", "41", "13", "42", "40", "1"]
      }
      this.form = data.role
      this.oldRoleName = this.form.roleName
      this.ticked = data.menuIds
      // await axios.get('/admin/role-detail', { params: { id: this.form.id } }).then(response => {
      //   const { code, data } = response.data
      //   if (code === '200' && data) {
      //     this.form = data.role
      //     this.oldRoleName = this.form.roleName
      //     this.ticked = data.menuIds
      //   }
      // }).catch(error => {
      //   console.error(error)
      // })
      setTimeout(() => {
        this.loading = false
      }, 200)
    },
    async onMenuTree () {
      this.treeData = [{
        "id": "11",
        "name": "商品",
        "path": "/goods",
        "icon": "deck",
        "opened": false,
        "children": [{
          "id": "21",
          "name": "商品",
          "path": "/goods/metrics",
          "icon": "shopping_basket",
          "opened": false,
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "29",
          "name": "发布商品",
          "path": "/goods/form",
          "icon": "screen_share",
          "opened": false,
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "28",
          "name": "商品列表",
          "path": "/goods/list",
          "icon": "shopping_basket",
          "opened": false,
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "22",
          "name": "商品分类",
          "path": "/goods/category",
          "icon": "table_chart",
          "opened": false,
          "badge": "New",
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "23",
          "name": "商品品牌",
          "path": "/goods/brand",
          "icon": "spa",
          "opened": false,
          "badge": "New",
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "24",
          "name": "商品规格",
          "path": "/goods/gg",
          "icon": "settings_remote",
          "opened": false,
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "25",
          "name": "商品属性",
          "path": "/goods/attribute",
          "icon": "sort",
          "opened": false,
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "26",
          "name": "商品评价",
          "path": "/goods/commit",
          "icon": "rate_review",
          "opened": false,
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "27",
          "name": "商品咨询",
          "path": "/goods/zx",
          "icon": "headset",
          "opened": false,
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "30",
          "name": "相册管理",
          "path": "/goods/album",
          "icon": "rotate_90_degrees_ccw",
          "opened": false,
          "pids": "0,11,",
          "pid": "11"
        }, {
          "id": "31",
          "name": "供货商",
          "path": "/goods/supplier",
          "icon": "public",
          "opened": false,
          "pids": "0,11,",
          "pid": "11"
        }],
        "pids": "0,",
        "pid": "0"
      }, {
        "id": "12",
        "name": "订单",
        "path": "/order",
        "icon": "featured_play_list",
        "opened": false,
        "children": [{
          "id": "32",
          "name": "订单列表",
          "path": "/order/list",
          "icon": "notes",
          "opened": false,
          "pids": "0,12,",
          "pid": "12"
        }, {
          "id": "33",
          "name": "结算列表",
          "path": "/order/list1",
          "icon": "storage",
          "opened": false,
          "pids": "0,12,",
          "pid": "12"
        }, {
          "id": "34",
          "name": "支付订单",
          "path": "/order/list2",
          "icon": "toys",
          "opened": false,
          "pids": "0,12,",
          "pid": "12"
        }, {
          "id": "35",
          "name": "退款订单",
          "path": "/order/list3",
          "icon": "swap_horiz",
          "opened": false,
          "pids": "0,12,",
          "pid": "12"
        }, {
          "id": "36",
          "name": "订单售后列表",
          "path": "/order/service",
          "icon": "space_bar",
          "opened": false,
          "pids": "0,12,",
          "pid": "12"
        }, {
          "id": "37",
          "name": "订单核销",
          "path": "/order/verif",
          "icon": "sports_football",
          "opened": false,
          "pids": "0,12,",
          "pid": "12"
        }, {
          "id": "38",
          "name": "交易设置",
          "path": "/order/set",
          "icon": "settings_input_component",
          "opened": false,
          "pids": "0,12,",
          "pid": "12"
        }, {
          "id": "39",
          "name": "配送管理",
          "path": "/order/express",
          "icon": "settings_input_svideo",
          "opened": false,
          "pids": "0,12,",
          "pid": "12"
        }],
        "pids": "0,",
        "pid": "0"
      }, {
        "id": "13",
        "name": "财务",
        "path": "/account",
        "icon": "broken_image",
        "opened": false,
        "children": [{
          "id": "40",
          "name": "交易结算",
          "path": "/account/list4",
          "icon": "insert_chart_outlined",
          "opened": false,
          "pids": "0,13,",
          "pid": "13"
        }, {
          "id": "41",
          "name": "会员账户",
          "path": "/account/list3",
          "icon": "group",
          "opened": false,
          "pids": "0,13,",
          "pid": "13"
        }, {
          "id": "42",
          "name": "提现申请",
          "path": "/account/list2",
          "icon": "local_florist",
          "opened": false,
          "pids": "0,13,",
          "pid": "13"
        }, {
          "id": "43",
          "name": "退款日志",
          "path": "/account/list1",
          "icon": "landscape",
          "opened": false,
          "pids": "0,13,",
          "pid": "13"
        }],
        "pids": "0,",
        "pid": "0"
      }, {
        "id": "1",
        "name": "系统",
        "path": "/system",
        "icon": "settings",
        "opened": false,
        "children": [{
          "id": "44",
          "name": "缓存管理",
          "path": "/system/overview",
          "icon": "language",
          "opened": false,
          "pids": "0,1,",
          "pid": "1"
        }, {
          "id": "8",
          "name": "系统权限",
          "icon": "security",
          "opened": true,
          "children": [{
            "id": "9",
            "name": "用户管理",
            "path": "/system/users",
            "icon": "account_box",
            "opened": false,
            "pids": "0,1,8,",
            "pid": "8"
          }, {
            "id": "10",
            "name": "角色管理",
            "path": "/system/roles",
            "icon": "save",
            "opened": false,
            "pids": "0,1,8,",
            "pid": "8"
          }, {
            "id": "2",
            "name": "策略管理",
            "path": "/system/policies",
            "icon": "inbox",
            "opened": false,
            "badge": "New",
            "pids": "0,1,8,",
            "pid": "8"
          }],
          "pids": "0,1,",
          "pid": "1"
        }, {
          "id": "14",
          "name": "日志列表",
          "path": "/system/logs",
          "icon": "assignment",
          "opened": false,
          "pids": "0,1,",
          "pid": "1"
        }, {
          "id": "20",
          "name": "菜单管理",
          "path": "/system/menus",
          "icon": "gradient",
          "opened": false,
          "pids": "0,1,",
          "pid": "1"
        }, {
          "id": "19",
          "name": "监控信息",
          "path": "/system/metrics",
          "icon": "developer_board",
          "opened": false,
          "pids": "0,1,",
          "pid": "1"
        }],
        "pids": "0,",
        "pid": "0"
      }]
      // await axios.get('/admin/menu-tree', {}).then(response => {
      //   const { code, data } = response.data
      //   if (code === '200' && data) {
      //     this.treeData = data
      //   }
      // }).catch(error => {
      //   console.error(error)
      // })
      setTimeout(() => {
        this.loading = false
      }, 200)
    },
    async onSubmit () {
      this.loading = true
      delete this.form.created
      delete this.form.status
      this.form.oldRoleName = this.oldRoleName
      this.form.menuIds = this.ticked
      await axios.post(`/admin/role${this.form.id ? '-update' : 's'}`, this.form).then(response => {
        const { code, message, data } = response.data
        if (code === '200' && data) {
          this.$q.notify({
            type: 'positive',
            message: '保存成功.'
          })

          this.$router.go(-1)
        } else {
          this.$q.notify({
            message
          })
        }
      }).catch(error => {
        console.error(error)
      })
      setTimeout(() => {
        this.loading = false
      }, 200)
    }
  }
}
</script>
